<template>
	<view class="components">
		<view class="posture">
			<view v-for="(item,index) in BasicSkill.slice(0, 3)" :key="index" @click="postureFN(item)"
				class="posture-list" :class="item.dance_action == posture.dance_action?'acitve':'' ">

				<svg-icon v-if="item.dance_action == posture.dance_action" :iconUrl="posture.dance_action_icon_url"
					:svgStyle="{ color: '#FFF' }" />

				<image v-else class="posture-icon" :src="item.dance_action_icon_url" mode=""
					style="width: 90rpx;height: 90rpx;"></image>


				<view class="posture-title">{{item.dance_action}}</view>
			</view>
			<view v-if="BasicSkill.length > 3" class="posture-list" @click="postureFN('更多')"
				:class="posture.dance_action == '更多' ?'acitve':'' ">
				<text class="tn-icon-menu-square-select-fill icon" style="font-size: 60rpx;"></text>
				<view class="posture-title">更多</view>
			</view>
		</view>
		<view class="photograph">
			<image :src="posture.dance_action_image_url" mode="scaleToFill" style="max-width: 472rpx;"></image>
			<view class="btn" @click="photograph">拍照</view>
		</view>
		<view class="flowpath">
			<view class="flowpath-list" v-for="(item,index) in flowpath" :key="index">
				<image :src="item.img" mode="" style="width: 32rpx;height: 32rpx;"></image>
				<image :src="item.right" mode="" style="width: 32rpx;height: 32rpx;" class="icon-right"></image>
				<text class="txt">{{item.title}}</text>
			</view>
		</view>
		<tn-modal v-model="show" title="警告" :content="content" :radius="40" :button="button" :maskCloseable="false"
			@click="DelModel"></tn-modal>
		<tn-modal v-model="showIos" :radius="40" :custom="true" :maskCloseable="false">
			<view class="IosModel">
				<view class="title">警告</view>
				<view class="content">{{contentIos}}</view>
				<button open-type="contact" session-from="舞界AI" show-message-card="true" send-message-title="舞界AI小程序"
					send-message-path="/pages/index/index" @click="showIos=false,show=false">
					了解详情
				</button>
			</view>
		</tn-modal>
	</view>
</template>

<script>
	import SvgIcon from "@/components/svgIcon.vue"
	import swbjf from "@/static/image/swbgf.png"
	import p1 from "@/static/image/1.png"
	import p2 from "@/static/image/2.png"
	import p3 from "@/static/image/3.png"
	import p4 from "@/static/image/4.png"
	import right from "@/static/image/right.png"

	export default {
		name: 'Components',
		props: {
			actinList: {
				type: Object,
				default: () => ({})
			}
		},
		components: {
			SvgIcon
		},
		data() {
			return {
				BasicSkill: [],
				posture: {},
				show: false,
				showIos: false,
				content: '',
				contentIos: '',
				button: [{
						text: '取消',
						backgroundColor: '#d4d4d4',
						fontColor: '#000'
					},
					{
						text: '前往充值',
						backgroundColor: '#7265E3',
						fontColor: '#FFFFFF'
					}
				],
				flowpath: [{
						title: '拍照上传',
						img: p1,
						right: right
					},

					{
						title: 'AI分析',
						img: p2,
						right: right
					},
					{
						title: '生成报告',
						img: p3,
						right: right
					},
					{
						title: '分享海报',
						img: p4,
					},
				]
			}
		},
		mounted() {},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		methods: {
			postureFN(item) {
				if (item == '更多') {
					this.posture = {}
					this.posture.dance_action = '更多'
					wx.navigateTo({
						url: '/basicPage/action/index'
					})
				} else {
					this.posture = item
				}
			},
			DelModel(e) {
				switch (e.index) {
					case 0:
						this.show = false
						this.showIos = false
						break;
					case 1:
						if (this.SystemPlatform == 'apple') {
							this.showIos = true
							this.contentIos = '非常抱歉，由于相关规范，iOS功能暂不可用，请联系线下工作人员。'
						} else {
							wx.navigateTo({
								url: `/basicPage/Pay/index`
							})
							break;
						}
				}
			},
			photograph() {
				console.log(this.SystemPlatform);
				// android  apple  devtools
				if (this.userInfo.member_info?.experience_pic_number == 0) {
					if (this.userInfo.member_info?.member_status == 0 && this.userInfo.member_info?.pic_number == 0) {
						this.show = true
						this.content = '您的体验次数已用完，请前往充值页面。'
						return
					} else if (this.userInfo.member_info?.member_status !== 0 && this.userInfo.member_info?.pic_number ==
						0) {
						this.show = true
						this.content = '您的会员次数已用完，请前往充值页面。'
						return
					} else if (this.userInfo.member_info?.member_status == 1 && this.userInfo.member_info?.pic_number !==
						0) {
						this.ShowSheet()
					}
				} else {
					this.ShowSheet()
				}
			},
			ShowSheet() {
				wx.showActionSheet({
					itemList: ['拍照', '从手机相册选择'],
					success: (res) => {

						switch (res.tapIndex) {
							case 0:
								const objStr = encodeURIComponent(JSON.stringify(this.posture))
								wx.navigateTo({
									url: `/basicPage/photograph/index?photo=${objStr}`
								})
								break;
							case 1:
								wx.chooseImage({
									count: 1,
									mediaType: ['image'],
									sizeType: ['original', 'compressed'],
									sourceType: ['album'], // 可以选择相机或相册
									success: (res) => {
										wx.uploadFile({
											url: this.$websiteUrl +
												'api/system/file/', // 服务器接口地址
											filePath: res.tempFilePaths[0],
											name: 'file', // 文件对应的 key，后端用这个 key 获取文件数据
											formData: {
												// question: this.valueVideo // 如果需要传递其他参数，可以在这里添加
											},
											header: {
												// Authorization : 'JWT ' + uni.getStorageSync('token'),
												'Content-Type': 'multipart/form-data', // 根据实际需求设置
											},
											success: (res) => {
												if (JSON.parse(res.data).code ===
													2000) {
													const data = {
														...this.posture,
														photoPath: JSON.parse(
																res
																.data).data
															.file_url,
														type: 'upload'
														// photoPath:'media/files/5/c/2.jpg'
													}
													wx.navigateTo({
														url: `/basicPage/AIgenerate/index?photo=${encodeURIComponent(JSON.stringify(data))}`
													});
												}
											},
											fail: (error) => {
												console.error('Upload failed:',
													error);
												wx.showToast({
													title: '上传失败',
													icon: 'error',
												})
											}
										});
									},
									fail: (err) => {
										console.error('选择照片失败:', err)
									}
								})
								break;
						}
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			}
		},
		watch: {
			actinList: {
				handler(newValue) {
					if (Object.keys(newValue).length > 0) {
						this.posture = newValue
						this.BasicSkill = uni.getStorageSync('userAction').slice(0, 4);
						if (uni.getStorageSync('userAction')[0].dance_action == newValue.dance_action || uni
							.getStorageSync('userAction')[1].dance_action == newValue.dance_action || uni.getStorageSync(
								'userAction')[2].dance_action == newValue.dance_action) {} else {
							this.BasicSkill.unshift(newValue)
						}

					} else {
						this.BasicSkill = uni.getStorageSync('userAction').slice(0, 4);
						this.posture = uni.getStorageSync('userAction')[0]
					}
				},
				deep: true, // 深度监听，监控对象内部属性的变化
				immediate: true // 组件加载时立即执行一次监听器
			}
		},
	}
</script>

<style lang="scss" scoped>
	.components {
		padding: 0 48rpx;
		padding-top: 34rpx;
		height: 75%;
		overflow-y: auto;

		.posture {
			display: flex;
			align-items: center;

			.posture-list {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 128rpx;
				height: 128rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(112, 136, 210, 0.1);
				border-radius: 40rpx;
				margin-right: 48rpx;
				margin-bottom: 80rpx;

				&:nth-child(4) {
					margin-right: 0;
				}

				.posture-icon {}

				.posture-title {
					position: absolute;
					bottom: -74rpx;
					margin-bottom: 34rpx;
					text-align: center;
					font-weight: 400;
					color: #2D3142;
					text-align: center;
					text-transform: none;
					font-size: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 110%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					word-break: break-all;

				}
			}

			.acitve {
				background: #7265E3;

				.posture-icon {
					color: #fff;
				}

				.icon {
					color: #fff;
				}

			}
		}

		.photograph {
			padding: 42rpx 0 44rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 40rpx 0rpx rgba(112, 136, 210, 0.1);
			border-radius: 32rpx;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 558rpx;
				height: 104rpx;
				margin: 0 auto;
				background: #7265E3;
				border-radius: 28rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.flowpath {
			display: flex;
			justify-content: center;
			margin-top: 32rpx;
			margin-bottom: 100rpx;

			.flowpath-list {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				opacity: 0.6;
				margin-right: 84rpx;

				&:nth-child(4) {
					margin-right: 0;
				}

				.icon-right {
					position: absolute;
					right: -55rpx;
				}

				.txt {
					position: absolute;
					bottom: -48rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #4C5980;
					text-align: center;
					white-space: nowrap;
				}
			}
		}
	
		.IosModel{
			.title{
				margin-bottom:15rpx;
				font-size: 20px;
				text-align: center;
			}
			.content{
				margin-bottom:30rpx;
			}
			button{
				background: #7265E3;
				border-radius: 28rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>